<template>
  <div class="special-service mar-t60">
    <div class="block-tit">
        {{ props.serviceInfo.title }}
    </div>
    <div class="special-list flex ju-bt mar-t30">
        <div 
            class="special-li"
            v-for="(item, index) in props.serviceInfo.child"
            :key="index"
            
        >
            <el-image 
                style="width: 305px; height: 176px" 
                :src="item.img" 
            />
            
            <div class="li-info pad20 flex-col flex-center">
                <div class="info-name">{{ item.title }}</div>
                <div class="info-tips mar-t16">{{ item.describe }}</div>
                <div class="info-btn mar-t38" @click="toPath(item)">查看详情</div>
            </div>
        </div>
    </div>
</div>
</template>

<script setup>
/**
 * 服务模块组件
*/
import { ref, defineProps } from "vue"
import { useRouter, useRoute } from "vue-router";
const router = useRouter();

const emit = defineEmits(['toPath'])
const toPath = item => {
   emit("toPath", item)
};
const props = defineProps({
    serviceInfo: {
        type: Object,
        default: {}
    }
})
const getAssetsImages = name => {
  return new URL(`/src/assets/serviceImgs/${name}.png`, import.meta.url).href;
};
</script>

<style lang="scss" scoped>
.block-tit {
    font-size: 28px;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: Medium;
    text-align: center;
    color: #202020;
}
.special-service {
    .special-list {
        .special-li {
            width: 305px;
            height: 380px;
            background: linear-gradient(180deg,#f0f3f7, #ffffff);
            border: 2px solid #ffffff;
            border-radius: 4px;
            box-shadow: 0px 10px 20px -2px rgba(0,0,0,0.08); 
            .li-info {
                .info-name {
                    font-size: 24px;
                    font-family: PingFang SC, PingFang SC-Medium;
                    font-weight: Medium;
                    text-align: center;
                    color: #202020;
                    line-height: 28px;
                }
                .info-tips {
                    font-size: 14px;
                    font-family: PingFang SC, PingFang SC-Regular;
                    font-weight: Regular;
                    text-align: center;
                    color: #575966;
                    line-height: 22px;
                }
                .info-btn {
                    width: 176px;
                    height: 40px;
                    border: 1px solid #0052d9;
                    border-radius: 2px;
                    font-size: 16px;
                    font-family: PingFang TC, PingFang TC-Regular;
                    font-weight: Regular;
                    text-align: center;
                    color: #0052d9;
                    line-height: 40px;
                }
            }
        }
    }
}
</style>